<template>
  <div>
    <ul>
      <li v-for="i in list" :key="i.id">
        <!-- <router-link to="`/home/message/detail?name=${i.message}&address=${i.address}`">{{i.message}}</router-link> -->
        <router-view 
          :to="{ 
            path: '/home/message/detail', 
            query: {name: i.message, address: i.message}
          }"
        >
        {{ i.message }}
        </router-view>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    data() {
      return {
        list: [
          {id: 1, message: '小红', address: '北京'},
          {id: 2, message: '小白', address: '瑞典'},
          {id: 3, message: '小黑', address: '刚果'},
        ]
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>